<template name="quotaselection">
	<!-- 额度选择界面 -->
	<view class="quotaselection">
		<!-- 额度选择导航栏 -->
		<view class="q_nav">
			<view class="n_back" @click="navigateBack">
				<image src="../../static/p_back.png" mode=""></image>
			</view>
			<text class="nav_title">Loan Details</text>
			<view class="n_kefu">
				<image src="../../static/p_kefu.png" mode=""></image>
			</view>
		</view>
		<view class="q_header">
			<view class="q_limit">
				<view class="q_limits">
					<image src="../../static/p_limit.png" mode=""></image>
					<image src="../../static/p_limitcire.png" mode="" class="q_limitcire"></image>
					<view class="q_count">
						<text>Loanable Amount</text>
						<text class="q_Cmony">₹{{ infodata.loanable_amount }}</text>
						<text>50000.00～23000.00</text>
					</view>
				</view>
			</view>
			<view class="q_loan">
				<text class="logn_text">Loan term (month)</text>
				<view class="loan_mouth">
					<template v-for="(item, index) in loanlist">
						<span @click="clickActive(item, index)" :class="curenIndex == index ? 'active' : ''" :key="index">{{
							item
						}}</span>
					</template>
				</view>
			</view>
		</view>
		<view class="q_mine">
			<text class="q_minetext">Loan details</text>
			<ul>
				<li><span class="q_red">Loan term</span><text class="q_black">{{ infodata.loan_term }}</text></li>
				<li><span class="q_red">Total interest</span><text class="q_black">₹{{ infodata.total_interest }}</text>
				</li>
				<li><span class="q_red">Repayment</span><text class="q_black">₹{{ infodata.replayment }}</text></li>
				<li><span class="q_red">Monthly interest</span><text class="q_black">₹{{ infodata.monthly_interest }}</text>
				</li>
				<li><span class="q_red">Monthly repayment (EMI)</span><text class="q_black">₹{{ infodata.monthly_repayment
				}}</text></li>
			</ul>
		</view>
		<button class="withdraw" @click="open">WITHDRAW MONEY</button>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" round="36rpx">
			<view style="height: 760rpx;width: 100%; box-sizing: border-box;" class="popup">
				<image src="../../static/p_close.png" mode="" @close="close"></image>
				<text class="pop_title">Delermineloaninforma</text>
				<ul>
					<li><span class="q_red">Amount ofloan</span><text class="q_black">₹35000.00</text></li>
					<li><span class="q_red">Total interest</span><text class="q_black">₹3000.00</text></li>
					<li><span class="q_red">Loan Term ( month )</span><text class="q_black">6</text></li>
					<li><span class="q_red">Repayment</span><text class="q_black">₹35000.00</text></li>
				</ul>
				<view class="agree">
					<u-checkbox-group @change="checkboxChange" style="margin-right: 10rpx;">
						<u-checkbox shape="square" activeColor="#D53030" size="30rpx" @change="change">
						</u-checkbox>
					</u-checkbox-group>
					<view class="agree_right">
						<text style="padding: 0 20rpx;">I have read and agre</text>
						<text class="agree_red" style="padding: 0 10rpx;">《 Loan and Security Agreement 》</text>
					</view>
				</view>
				<button class="MONEY" @click="MONEY">WITHDRAW MONEY</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import $_storage from '../../common/util/storage'
export default {
	data() {
		return {
			infodata: {
				loanable_amount: '50000.0',
				loan_month: 3,
				loan_term: 6,
				total_interest: '3000.0',
				replayment: '5300.0',
				monthly_interest: '500.0',
				monthly_repayment: '8833.0'
			},
			loanlist: [3, 6, 12, 24],
			curenIndex: 0,
			show: false,
		}
	},
	methods: {
		// 返回
		navigateBack(params) {
			const pages = getCurrentPages()
			if (pages.length === 1) {
				if (typeof params === 'number') {
					history.go(-params)
				} else {
					history.back()
				}
			} else {
				uni.navigateBack(1)
			}
		},
		open() {
			this.show = true
		},
		close() {
			this.show = false
		},
		checkboxChange(n) {
			console.log('change', n);
		},
		change() {

		},
		// Loan term (month) - 点击事件
		clickActive: function (val, idx) {
			this.curenIndex = idx
			this.infodata.loan_month = val
		},
		MONEY() {
			uni.navigateTo({
				url: "/pages/index/index",
				success: () => {
					$_storage.setStorage('limit', this.infodata)
				}
			})
		}

	}
}
</script>

<style lang="scss" scoped>
.q_nav {
	padding-top: 88rpx;
	background-color: #D53030;
	padding-left: 36rpx;
	padding-right: 40rpx;
	height: 204rpx;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: center;
}

.q_nav .n_kefu {
	width: 48rpx;
	height: 46rpx;
}

.q_nav .n_kefu image {
	width: 100%;
	height: 100%;
}

.q_nav .nav_title {
	font-size: 38rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 400;
	color: #FFFFFF;
	line-height: 54rpx;
	letter-spacing: 2rpx;
}

.q_nav .n_back {
	width: 22rpx;
	height: 38rpx;
}

.q_nav .n_back image {
	width: 100%;
	height: 100%;
}

// 额度选择
.q_header {
	background-color: #F9F8F8;
	width: 100%;
	padding-top: 82rpx;
	padding-left: 68rpx;
	padding-right: 68rpx;
	padding-bottom: 60rpx;
	box-sizing: border-box;
}

.q_header .q_limit {
	width: 442rpx;
	height: 250rpx;
	margin: auto;
	position: relative;
}

.q_header .q_limit .q_limits {
	width: 410rpx;
	height: 218rpx;
	position: relative;
	margin: auto;
}

.q_header .q_limit .q_limits image {
	width: 100%;
	height: 100%;
}

.q_header .q_limit .q_limits .q_limitcire {
	position: absolute;
	right: 0;
	top: 90rpx;
	width: 68rpx;
	height: 68rpx;
	transform: translateX(10%);
}

.q_header .q_limit .q_limits .q_count {
	position: absolute;
	top: 90rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	width: 312rpx;
	align-items: center;
	font-size: 22rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #999999;
	line-height: 28rpx;
}

.q_header .q_limit .q_limits .q_count .q_Cmony {
	font-size: 46rpx;
	font-family: SourceHanSansSC-Bold, SourceHanSansSC;
	font-weight: bold;
	color: #D53030;
	line-height: 68rpx;
}

.q_header .q_loan {
	margin-top: 76rpx;
	font-size: 32rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #000000;
	line-height: 48rpx;
}

.q_header .q_loan .loan_mouth {
	display: flex;
	justify-content: space-around;
	margin-top: 22rpx;

}

.q_header .q_loan .loan_mouth span {
	width: 106rpx;
	height: 64rpx;
	border-radius: 10rpx;
	border: 4rpx solid rgba(230, 230, 230, 1);
	font-size: 28rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 400;
	color: #C3C3C3;
	line-height: 64rpx;
	text-align: center;
}

.q_header .q_loan .loan_mouth span.active {
	border: 4rpx solid #D53030;
	color: #D53030;
}

.q_mine {
	background: #FFFFFF;
	box-shadow: 0px 2rpx 38rpx 0px rgba(165, 165, 165, 0.24);
	border-radius: 16rpx;
	width: 694rpx;
	margin: auto;
	padding-top: 36rpx;
	margin-top: 32rpx;
	padding-left: 40rpx;
	padding-right: 38rpx;
	margin-bottom: 48rpx;
	box-sizing: border-box;
}

.q_mine .q_minetext {
	font-size: 32rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #000000;
	line-height: 48rpx;
}

.q_mine ul {
	padding-left: 0;
}

.popup ul {
	width: 100%;
	padding-left: 0;
	margin-top: 44rpx;
	margin-bottom: 42rpx;
}

.q_mine ul li,
.popup ul li {
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid rgba(237, 237, 237, 1);
	margin-bottom: 32rpx;
	height: 52rpx;
}

.popup ul li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding: 0;
}

.q_mine ul li .q_red,
.popup ul li .q_red {
	font-size: 26rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 400;
	color: #D53030;
	line-height: 38rpx;
	height: 38rpx;
}

.q_mine ul li .q_black,
.popup ul li .q_black {
	font-size: 26rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #090909;
	line-height: 38rpx;
}

.withdraw {
	width: 694rpx;
	height: 88rpx;
	background: #D53030;
	border-radius: 16rpx;
	font-size: 34rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 88rpx;
}

.u-popup /deep/ .popup {
	padding-left: 48rpx;
	padding-right: 48rpx;
	width: 100%;
	position: relative;
	padding-top: 44rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.u-popup /deep/ .popup image {
	position: absolute;
	width: 26rpx;
	height: 26rpx;
	top: 32rpx;
	right: 38rpx;
}

.u-popup /deep/ .popup .pop_title {
	font-size: 34rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 600;
	color: #000000;
	line-height: 50rpx;
}

.u-popup /deep/ .popup .agree {
	display: flex;
	width: 100%;
	font-size: 26rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 400;
	color: #000000;
	margin-top: 42rpx;
}

.u-popup /deep/ .popup .agree .agree_red {
	font-size: 26rpx;
	font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
	font-weight: 400;
	color: #D53030;
	line-height: 38rpx;
}

.u-popup /deep/ .popup .agree .agree_right {
	width: 614rpx;
}

.u-popup /deep/ .popup .MONEY {
	width: 676rpx;
	height: 88rpx;
	background: #D53030;
	border-radius: 16rpx;
	margin: auto;
	margin-top: 46rpx;
	font-size: 34rpx;
	font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
	font-weight: 500;
	color: #FFFFFF;
}
</style>
